<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #ccc;
        }
        .container {
          perspective: 1000px;
        }
        
        .text {
            display: inline-block;
            font-size: 100px;
            padding: 2em;
            border: 1px solid transparent; /* 保持边框透明，以便看到阴影效果 */
            transform: rotateX(30deg) rotateY(60deg) rotateZ(90deg);
            animation: rotate 100s linear infinite;
            
            background: linear-gradient(to right, transparent, black); /* 应用透明度渐变背景 */
            background-clip: text; /* 使渐变只作用于文字上 */
            color: #333; /* 文字颜色恢复可见 */
            text-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5); /* 添加投影 */
        }

        @keyframes rotate {
          0% {transform: rotateX(30deg) rotateY(60deg) rotateZ(90deg);}
          25% {transform: rotateX(390deg) rotateY(420deg) rotateZ(450deg);}
          50% {transform: rotateX(60deg) rotateY(90deg) rotateZ(120deg);}
          75% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
          100% {transform: rotateX(30deg) rotateY(60deg) rotateZ(90deg);}
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">welcome！</div>
    </div>
</body>
</html>